<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width:100%;">
    <el-col :span="20">
      <span>{{ nodeData.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <!--  通过elemnet-ui提供的@command函数 相当于是吧v-model绑定到select下拉菜单上 根据option中的value 获取当期的列的信息 -->
          <el-dropdown @command="handleAtcile">
            <span>
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <!--  俩个对象共用的操作是不同的哈 -->
              <template v-if="!nodeData.root">
                <el-dropdown-item command="edit">编辑部分</el-dropdown-item>
                <el-dropdown-item command="del">删除部门</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
// 导入部门删除部门接口接口
import { reqDelDepartments } from '@/api/departments'
export default {
  name: 'TreeTools',
  // 接收每一条子节点的信息
  props: {
    nodeData: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 触发下拉按钮
    handleAtcile(type) {
      // 判别部门操作
      if (type === 'add') { // 点击添加选项将当前部门id带过去
      // 为了区分编辑部门跟添加部门 在传参的过程功将 它们的类型type 顺便也带过去
        this.$emit('on-open', { id: this.nodeData.id, pedType: 'add' })
        console.log('添加部门')
      } else if (type === 'edit') {
        this.$emit('on-open', { id: this.nodeData.id, pedType: 'edit' })
        console.log('编辑部门')
      } else if (type === 'del') {
        // 删除部门
        this.handleDelete(this.nodeData.id)
      }
    },
    // 根据部门id删当前部门
    async handleDelete(id) {
      //  添加提示
      const set = await this.$confirm('确认要删除部门吗？, 是否继续?', '提示', {
        //  Promise函数中上一次then return 出去的值下个then链式任然阔以拿到  同样在在catch return 的也阔以拿到
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (set === 'cancel') return // 点击取消直接退出函数
      const resp = await reqDelDepartments(id)
      if (resp.code === 10000) {
        this.$message.success('删除成功哈!')
        // 合适位置派发事件重新加载数据
        this.$emit('on-success')
      }
    }
  }
}
</script>
